<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>XMLHttpRequest 基础</title>
	</head>
	<body>
		<!-- XMLHttpRequest 基础 -->

		<script>
			// 1. 创建 XMLHttpRequest。
			let xhr = new XMLHttpRequest() // 此构造器没有参数

			// 2. 初始化它，通常就在 new XMLHttpRequest 之后。
			xhr.open(method, URL, [async, user, password])
			// method:请求方法。通常是 GET 或 POST。
			// URL:请求的 URL。通常是一个字符串，也可以是 URL 对象。
			// async:如果显示地设置为 false，就表示该请求是同步的。
			// user, password:HTTP基本身份认证（如果需要的话）的用户名和密码。
			// open 调用与名称相反，不会建立连接，它仅是配置请求，要调用开启需要使用 send() 方法。

			// 3. 发送请求
			xhr.send([body]) // body 请求体

			// 4. 监听 xhr 状态以获取响应。
			// 三个最常用的事件：
			// laod “当请求完成”（即使HTTP状态为 400 或 500 等），并且响应已完全下载。
			xhr.onload = function () {
				console.log(`Loaded: ${xhr.status} ${xhr.statusText}`)
			}

			// error 当无法发出请求，例如网络中断或者无效的URL。
			// 仅在根本无法请求时触发
			xhr.onerror = function () {
				console.log('Network Error')
			}

			// progress 在下载响应期间定期触发，报告已经下载了多少。
			// 定期触发。
			xhr.onprogress = function (event) {
				// event.loaded 已经下载的字节数
				// event.lengthComputable 当服务器发送了 Content-Length 头，则为 true
				// event.total 总字节数（如果 lengthComputable 为 true）
			}
		</script>
	</body>
</html>
